<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      isActive: false,
      span: '  <span>人机</span>',
      myclass: 't03class',
      myid: 't03id',
      classObject: { 'container': true, 'textBoId': true },
      list: [1, 2, 3, 4, 5]
    }
  }
}
</script>

<template>

  <div>
    <div class="container">{{ message }}</div>
    <div :class="{ container: isActive, container1: !isActive }">isActive true变红，false变蓝</div>
    <div v-html="span"></div>
    <div :class="myclass" :id="myid">动态设置class和id</div>
    <div :class="classObject">classObject对象绑定</div>
  </div>

  <div>
    <div v-if="isActive">显示</div>
    <div v-else>不显示</div>
    <div v-show="isActive">显示</div>
    <div v-show="!isActive">不显示</div>

    <div>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>

</template>

<style>
.container {
  color: red;
}

.container1 {
  color: blue;
}

.textBoId {
  font-weight: bold;
}
</style>
